<template>
  <div class="ssal-calendar" @contextmenu.prevent="prevent">
    <div v-show="tipZccc" class="tipZ"></div>
    <el-scrollbar ref="scroll" class="controller-scroll">
       <div :class="['calendar-controller', view == 'list' ? 'list-view' : '']">
        <div class="date-filter" v-if="view != 'list'">
          <el-row v-if="currentUser == mineId" style="margin-right:10px;">
            <el-cascader v-model="mineId" :options="organizeList" @change="handleOrganizeChange" size="small" class="cascader" :show-all-levels="false" :props="{value: 'id'}" />
            <el-checkbox v-model="showPrivateEvent" label="包括私人事务" size="small" style="margin-top: 3px;" />
          </el-row>
          <el-radio-group
            :fill="fillName"
            v-model="dataType"
            size="small"
            style="height: 27px"
            @change="changeDataType"
          >
            <el-radio-button
              v-for="(item, index) in dataTypeList"
              :key="index"
              :label="item.value"
              style="height: 27px"
            >
              <text v-if="index != 5">{{ item.label }}</text
              ><text v-else>{{ item.label + `(${item.text})` }}</text>
            </el-radio-button>
          </el-radio-group>
          <!--trigger="focus"-->
          <el-popover placement="bottom" :width="670" :visible="visible">
            <template #reference>
              <el-button
                plain
                size="small"
                style="
                  height: 27px;
                  margin-left: 10px;
                  border-radius: 2px;
                  padding: 5px 6px;
                "
                @click="visible = !visible"
                >筛选
                <el-icon style="margin-left: 2px; margin-right: 0"><ele-Filter /></el-icon
              ></el-button>
            </template>
            <el-row>
              <el-select
                v-model="eventType"
                multiple
                collapse-tags
                placeholder="事务类型"
                size="small"
                style="width: 150px"
                @visible-change="selectChange"
              >
                <el-option
                  v-for="(item, index) in eventTypeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-model="company"
                multiple
                collapse-tags
                placeholder="企业名称"
                size="small"
                style="margin-left: 10px; width: 150px"
                @visible-change="selectChange"
              >
                <el-option
                  v-for="(item, index) in companyList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-model="project"
                multiple
                collapse-tags
                placeholder="项目名称"
                size="small"
                style="margin-left: 10px; width: 150px"
                @visible-change="selectChange"
              >
                <el-option
                  v-for="(item, index) in projectList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-model="market"
                multiple
                collapse-tags
                placeholder="市场活动"
                size="small"
                style="margin-left: 10px; width: 150px"
                @visible-change="marketChange"
              >
                <el-option
                  v-for="item in marketList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-row>
          </el-popover>
          <el-button
            @click="warningClick"
            :style="{
              background: isWarning ? '#18a058' : '',
              color: isWarning ? '#fff' : ''
            }"
            class="other-btn"
            size="small"
            plain
            >
              重要
              <round
                style="margin-left:3px"
                theme="filled"
                size="10"
                fill="#F56C6C"
              />
              <!-- <el-icon style="margin-left: 2px; margin-right: 0"><ele-Filter /></el-icon> -->
              <!-- <img :src="Warning" style="width: 15px; display: block; margin-left: 5px"/> -->
          </el-button>
          <el-button
            @click="BranClick"
            :style="{ background: isBran ? '#18a058' : '', color: isBran ? '#fff' : '' }"
            class="other-btn"
            size="small"
            plain
            >目标
            <pennant
              style="margin-left:3px"
              theme="filled"
              size="13"
              fill="#E6A23C"
            />
            <!-- <img :src="Bran" style="width: 15px; display: block; margin-left: 5px" /> -->
          </el-button>
          <el-button
            @click="checkIgnore"
            :style="{ background: isIgnore ? '#18a058' : '', color: isIgnore ? '#fff' : '' }"
            class="other-btn"
            size="small"
            plain
          >
          忽略的
          </el-button>
        </div>
        <div class="date-change-container">
          <div v-if="view != 'list'" :class="['today', isToday ? 'today-disabled' : '']" @click="backToday">
            今天
          </div>
          <el-date-picker
            v-if="view != 'list'"
            v-model="currentDate"
            type="month"
            placeholder="请选择"
            size="small"
            format="YYYY年MM月"
            value-format="YYYY-MM"
            style="margin-right: 10px; width: 100px; height: 27px"
            :clearable="false"
            :editable="false"
            @change="dateChange"
          />
          <div class="date-change"  v-if="view != 'list'">
            <div class="btn" data-type="prev" @click="changeDate">
              <left
                theme="outline"
                size="20"
                :fill="getThemeConfig.isIsDark ? 'var(--next-color-bar)' : '#303133'"
              />
            </div>
            <div class="btn" data-type="next" @click="changeDate">
              <right
                theme="outline"
                size="20"
                :fill="getThemeConfig.isIsDark ? 'var(--next-color-bar)' : '#303133'"
              />
            </div>
          </div>
          <div class="view-controller">
            <div class="calendar-tab">
              <div
                :class="['tab-cell', item.type == view ? 'tab-active' : '']"
                v-for="(item, index) in viewType"
                :key="index"
                @click="changeView(item)"
              >
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <div class="calendar-container-box">
      <Day
        v-if="view == 'day'"
        :nowDate="nowDate"
        :initHours="hours"
        :events="events"
        :week="week"
        :belongsUser="belongsUser"
        @exchangeDate="exchangeDate"
        @delEvent="delEvent"
        @submitForm="submitForm"
      ></Day>
      <Week
        v-if="view == 'week'"
        :weekTitle="weekTitle"
        :week="week"
        :nowDate="nowDate"
        :initHours="hours"
        :events="events"
        :belongsUser="belongsUser"
        @exchangeDate="exchangeDate"
        @delEvent="delEvent"
        @submitForm="submitForm"
        @completeEvent="completeEvent"
        @approverAccess="approverAccess"
        @approverReject="approverReject"
      ></Week>
      <Month
        v-if="view == 'month'"
        :weekTitle="weekTitle"
        :month="month"
        :events="events"
        :belongsUser="belongsUser"
        @exchangeDate="exchangeDate"
        @delEvent="delEvent"
        @submitForm="submitForm"
        @closeMore="closeMore"
      ></Month>
      <MultipleWeek
        v-if="view == 'multipleweek'"
        :weekTitle="weekTitle"
        :multipleweek="multipleweek"
        :events="events"
        :belongsUser="belongsUser"
        @exchangeDate="exchangeDate"
        @delEvent="delEvent"
        @submitForm="submitForm"
        @addSummary="addSummary"
        @completeEvent="completeEvent"
        @approverAccess="approverAccess"
        @approverReject="approverReject"
      ></MultipleWeek>
      <five-week
        v-if="view == 'fiveWeek'"
        :weekTitle="weekTitle"
        :weeks="fiveWeek"
        :month="fiveWeek"
        :events="events"
        :belongsUser="belongsUser"
        v-model:scrollDisabled="scrollDisabled"
        @delEvent="delEvent"
        @completeEvent="completeEvent"
        @approverAccess="approverAccess"
        @approverReject="approverReject"
      ></five-week>
      <List
          v-show="view == 'list'"
          @delEvent="delEvent"
      ></List>
      <!-- @completeEvent="completeEvent" -->
    </div>
    <!-- <div class="calendar-page-options">
      <div class="page-icon page-left" data-type="prev" @click="changeDate">
        <left-c
          theme="filled"
          size="40"
          :fill="
            getThemeConfig.isIsDark
              ? 'var(--el-color-primary-dark-2)'
              : 'var(--el-color-primary)'
          "
        />
      </div>
      <div class="page-icon page-right" data-type="next" @click="changeDate">
        <right-c
          theme="filled"
          size="40"
          :fill="
            getThemeConfig.isIsDark
              ? 'var(--el-color-primary-dark-2)'
              : 'var(--el-color-primary)'
          "
        />
      </div>
    </div> -->
  </div>
</template>

<script>
import {
  reactive,
  toRefs,
  onMounted,
  ref,
  watch,
  computed,
  nextTick,
  provide,
  onUnmounted,
  getCurrentInstance
} from "vue";

import { Left, Right, LeftC, RightC, Round, Pennant } from "@icon-park/vue-next";
import Calendar from "../lib/calendar.js";
import { filterDay } from "../lib/event.js";
import { getCurrent } from "../lib/utils.js";
import { defaultConfig } from "../lib/config.js";

import Month from "../Month/index.vue";
import Week from "../Week/index.vue";
import Day from "../Day/index.vue";
import MultipleWeek from "../MultipleWeek/index.vue";
import FiveWeek from "../FiveWeek/index.vue";
import List from "../List/index.vue";
import { useThemeConfig } from "/@/stores/themeConfig";
import { storeToRefs } from "pinia";
// import Warning from "/@/assets/Warning.png";
// import Bran from "/@/assets/Bran.png";
import { homeApi } from "/@/api/home/index";
import { ElLoading } from 'element-plus'

export default {
  name: "Calendar",
  components: {
    Left,
    Right,
    LeftC,
    RightC,
    Round,
    Pennant,
    Month,
    Week,
    Day,
    MultipleWeek,
    FiveWeek,
    List
  },
  props: {
    range: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // events: {
    //   type: Array,
    //   default() {
    //     return []
    //   }
    // },
    defaultView: {
      type: String,
      default: null,
    },
    belongsUser: {
      type: Array,
      default() {
        return [];
      },
    },
    currentUser: {
      type: String,
      default() {
        return null
      }
    },
    organizeList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  emits: ["warningArrClick"],
  setup(props, context) {
    const { range, defaultView } = toRefs(props);
    const homeCalendar = homeApi();
    const { proxy } = getCurrentInstance()
    const state = reactive({
      currentTime: ref(getCurrent()),
      currentInterver: null,
      currentRange: [], // 当前视图的开始和结束时间
      calc: {},
      month: [],
      hours: [],
      week: [],
      multipleweek: [],
      fiveWeek: [],
      list: [],
      nowDate: {},
      currentDate: "",
      marketList: [],
      weekTitle: [
        { day: "一", weekend: false },
        { day: "二", weekend: false },
        { day: "三", weekend: false },
        { day: "四", weekend: false },
        { day: "五", weekend: false },
        { day: "六", weekend: true },
        { day: "日", weekend: true },
      ],
      viewType: [
        {
          title: "1周",
          type: "week",
        },
        {
          title: "2周",
          type: "multipleweek",
        },
        {
          title: "5周",
          type: "fiveWeek",
        },
        {
          title: "列表",
          type: "list",
        },
      ],
      len: 0,
      currentMonthIndex: 0,
      preMonth: [],
      nextMonth: [],
      scrollDisabled: false,
      dataType: "0", // 数据类型
      dataTypeList: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "我发起的",
          value: "1",
        },
        {
          label: "我执行的",
          value: "2",
        },
        // {
        //   label: "未完成",
        //   value: "3",
        // },
        {
          label: "我审批的",
          value: "4",
        },
        // {
        //   label: "逾期",
        //   value: "5",
        //   text: "7",
        // },
        {
          label: "抄送我的",
          value: "6",
        },
      ],
      eventType: [],
      eventTypeList: [
        {
          label: "人事",
          value: "1",
        },
        {
          label: "商品",
          value: "2",
        },
        {
          label: "订单",
          value: "3",
        },
      ],
      company: [],
      companyList: [
        {
          label: "xx公司",
          value: "1",
        },
      ],
      project: [],
      projectList: [
        {
          label: "xx项目",
          value: "1",
        },
      ],
      visible: false,
      weekScroll: 0,
      market: "",
      timer: {},
      tipY: false,
      tim: {},
      overTime: 0,
      tipZccc: false,
      showStatus: true,
      isWarning: false,
      isBran: false,
      lockData: false, // 数据获取锁，防止重复获取数据
      isIgnore: false, // 是否查看忽略的
      mineId: '1', // 本人id
      showPrivateEvent: false, // 是否显示私人事务
    });
    // 提供响应式的值
    const status = ref(true);
    provide("status", status);
    // provide(){
    //   return {
    //     status:state.showStatus
    //   }
    // }
    const storesThemeConfig = useThemeConfig();
    const { themeConfig } = storeToRefs(storesThemeConfig);
    const getThemeConfig = computed(() => {
      return themeConfig.value;
    });
    let view = ref(defaultView.value || "week");
    let isToday = ref(true);

    // 在这里获取全部数据
    // 获取本月第一天的数据
    let deEvents = ref(null); // 筛选后的events

    // let deEvents = ref(filterDay(events.value)) // 筛选后的events
    let showTime = ref(false); // 展示点击的时间,
    let selectDate = ref(null);
    let events = ref([]);
    // 初始化数据
    const init = (date) => {
      state.calc.setDate(date);
      state.nowDate = state.calc.getInfo(date);
      // state.preMonth = state.calc.getStartMonth(state.calc.getDate(state.calc.selectDate.fullDate, -1, 'month').fullDate).weeks
      // state.nextMonth = state.calc.getStartMonth(state.calc.getDate(state.calc.selectDate.fullDate, 1, 'month').fullDate).weeks
      state.month = state.calc.month;
      state.currentMonth = state.calc.month;
      state.hours = state.calc.hours;
      state.week = state.calc.week;
      // console.log("eeks.val",state.week)
      state.len = state.calc.hours.length;
      state.currentTime = getCurrent();
      state.currentDate = state.calc.selectDate.fullDate;
      const afterSeven = state.calc.getDate(state.calc.selectDate.fullDate, 7, "day").fullDate;
      state.multipleweek = [
        state.calc.getStartWeek(state.calc.selectDate.fullDate, 7),
        state.calc.getStartWeek(afterSeven, 7),
      ]; // 2周
      state.fiveWeek = state.calc.getAnyWeek(state.calc.selectDate.fullDate, 5, 1);

      //FIXME 随便拿的列表数据 记得改
      // state.list = state.calc.getAnyWeek(state.calc.selectDate.fullDate, 5, 1);

          // 下一周数据
      // const lastDate = state.fiveWeek[state.fiveWeek.length - 1][6];
      // eslint-disable-next-line no-debugger
      // const nextDate = state.calc.getDate(lastDate.fullDate, 7, "day").fullDate;
      // 上一周数据
      // let beginData = state.fiveWeek[0][0].fullDate;
      // 获取本月最后一天的数据
      // let enddATA = state.fiveWeek[4][state.fiveWeek[4].length - 1].fullDate;
      showTime.value = false;
      if(view.value !== 'list') {
        // 列表的数据在列表页获取
        getEvent()
      }
    };

    watch(
      () => state.nowDate,
      (val) => {
        if (val) {
          // 监听时间切换
          state.currentDate = val.fullDate;
        }
      }
    );
    watch(
      () => state.overTime,
      (val) => {
        if (val) {
          // 监听时间切换
          if (state.tipZccc === false) {
            state.tipZccc = true;
            status.value = false;
          }
        }
      }
    );
    watch(
      () => state.scrollDisabled,
      val => {
        // 监听5周视图时，是否禁用滚动
        if(view.value == "fiveWeek" && !val) {
          windowAddMouseWheel();
        }
      }
    )
    const changeDate = (e) => {
      const type = e.currentTarget.dataset.type; // prev, next
      switch (view.value) {
        case "month":
          state.currentMonthIndex = 0;
          if (type == "prev") {
            // 之前
            const preDate = state.calc.getDate(state.nowDate.fullDate, -1, "month")
              .fullDate;
            state.calc.setDate(preDate);
            state.nowDate = state.calc.getInfo(preDate);
          } else if (type == "current") {
            const currentDate = state.calc.getDate(state.nowDate.fullDate, 0, "month")
              .fullDate;
            state.calc.setDate(currentDate);
            state.nowDate = state.calc.getInfo(currentDate);
          } else {
            const nextDate = state.calc.getDate(state.nowDate.fullDate, 1, "month")
              .fullDate;
            state.calc.setDate(nextDate);
            state.nowDate = state.calc.getInfo(nextDate);
          }
          break;
        case "week":
          if (type == "prev") {
            // 之前
            const preDate = state.calc.getDate(state.nowDate.fullDate, -7, "day")
              .fullDate;
            state.calc.setDate(preDate);
            state.nowDate = state.calc.getInfo(preDate);
          } else {
            const nextDate = state.calc.getDate(state.nowDate.fullDate, 7, "day")
              .fullDate;
            state.calc.setDate(nextDate);
            state.nowDate = state.calc.getInfo(nextDate);
          }
          break;
        case "day":
          if (type == "prev") {
            // 之前
            const preDate = state.calc.getDate(state.nowDate.fullDate, -1, "day")
              .fullDate;
            state.calc.setDate(preDate);
            state.nowDate = state.calc.getInfo(preDate);
          } else {
            const nextDate = state.calc.getDate(state.nowDate.fullDate, 1, "day")
              .fullDate;
            state.calc.setDate(nextDate);
            state.nowDate = state.calc.getInfo(nextDate);
          }
          break;
        case "multipleweek":
          if (type == "prev") {
            const preDate = state.calc.getDate(state.nowDate.fullDate, -14, "day")
              .fullDate;
            state.calc.setDate(preDate);
            state.nowDate = state.calc.getInfo(preDate);
          } else {
            const nextDate = state.calc.getDate(state.nowDate.fullDate, 14, "day")
              .fullDate;
            state.calc.setDate(nextDate);
            state.nowDate = state.calc.getInfo(nextDate);
          }
          break;
        case "fiveWeek":
          if (type == "prev") {
            const preDate = state.calc.getDate(state.nowDate.fullDate, -35, "day")
              .fullDate;
            state.calc.setDate(preDate);
            state.nowDate = state.calc.getInfo(preDate);
          } else {
            const nextDate = state.calc.getDate(state.nowDate.fullDate, 35, "day")
              .fullDate;
            state.calc.setDate(nextDate);
            state.nowDate = state.calc.getInfo(nextDate);
          }
          break;

          //FIXME 没改与5周一致
        // case "list":
        //   if (type == "prev") {
        //     const preDate = state.calc.getDate(state.nowDate.fullDate, -35, "day")
        //         .fullDate;
        //     state.calc.setDate(preDate);
        //     state.nowDate = state.calc.getInfo(preDate);
        //   } else {
        //     const nextDate = state.calc.getDate(state.nowDate.fullDate, 35, "day")
        //         .fullDate;
        //     state.calc.setDate(nextDate);
        //     state.nowDate = state.calc.getInfo(nextDate);
        //   }
        //   break;
      }
      const afterSeven = state.calc.getDate(state.nowDate.fullDate, 7, "day").fullDate;
      state.multipleweek = [
        state.calc.getStartWeek(state.nowDate.fullDate, 7),
        state.calc.getStartWeek(afterSeven, 7),
      ];
      state.month = state.calc.month;
      // state.preMonth = state.calc.getStartMonth(state.calc.getDate(state.nowDate.fullDate, -1, 'month').fullDate).weeks
      // state.nextMonth = state.calc.getStartMonth(state.calc.getDate(state.nowDate.fullDate, 1, 'month').fullDate).weeks
      state.week = state.calc.week;
      state.currentMonth = state.calc.month;
      state.fiveWeek = state.calc.getAnyWeek(state.nowDate.fullDate, 5, 1);
      if (state.currentTime) {
        isToday.value =
          state.nowDate.fullDate ===
          state.currentTime.year +
            "-" +
            state.currentTime.month +
            "-" +
            state.currentTime.day;
      } else {
        isToday.value = false;
      }
      getEvent()
    };
    // eslint-disable-next-line no-unused-vars
    const getMonth = (type) => {
      const lastDate = new Date(
        new Date(
          state.nowDate.year + "-" + state.nowDate.month + "-01 00:00:00"
        ).getTime() -
          24 * 60 * 60 * 1000
      );
      const lastDay = lastDate.getDay();
      let lastIndex = Math.floor((lastDate.getDate() - 1) / 6) - 1;
      if (lastIndex >= lastDay && lastIndex - lastDay <= 1) {
        lastIndex = lastIndex - 1;
      }
      if (type == "down") {
        state.currentMonthIndex += 1;
        if (state.currentMonthIndex >= 0) {
          if (state.currentMonthIndex == 4) {
            changeDate({
              currentTarget: {
                dataset: {
                  type: "next",
                },
              },
            });
            return false;
          }
          let data = Object.assign(state.currentMonth);
          data = Object.values(data);
          const nextMonth = state.nextMonth;
          let arr = data;
          arr.splice(0, state.currentMonthIndex);
          let newArr = [];
          const hasNext = data[data.length - 1].find((item) => {
            return item.date == 1;
          });
          for (let i = 0; i < Math.abs(state.currentMonthIndex); i++) {
            newArr.push(nextMonth[hasNext ? i + 1 : i + 2]);
          }
          const list = { ...arr.concat(newArr) };
          state.month = list;
        } else {
          const current = Object.values(Object.assign(state.month));
          const arr = current.splice(1, current.length - 1);
          const currentMonth = Object.values(Object.assign(state.currentMonth));
          const newArr = currentMonth.splice(state.currentMonthIndex - 1, 1);
          const list = { ...arr.concat(newArr) };
          state.month = list;
        }
      } else if (type == "up") {
        state.currentMonthIndex -= 1;
        if (state.currentMonthIndex <= 0) {
          if (state.currentMonthIndex == -4) {
            changeDate({
              currentTarget: {
                dataset: {
                  type: "prev",
                },
              },
            });
            return false;
          }
          if (state.currentMonthIndex == 0) {
            changeDate({
              currentTarget: {
                dataset: {
                  type: "current",
                },
              },
            });
            return false;
          }
          const preMonth = state.preMonth;
          let data = Object.assign(state.currentMonth);
          data = Object.values(data);
          let arr = data;
          arr.splice(state.currentMonthIndex);
          let newArr = [];
          for (let i = 0; i < Math.abs(state.currentMonthIndex); i++) {
            newArr.unshift(preMonth[lastIndex - i]);
          }
          const list = { ...newArr.concat(arr) };
          state.month = list;
        } else {
          // 含有下月数据
          const current = Object.values(Object.assign(state.month));
          const arr = current.splice(0, current.length - 1);
          const currentMonth = Object.values(Object.assign(state.currentMonth));
          const newArr = currentMonth.splice(state.currentMonthIndex, 1);
          const list = { ...newArr.concat(arr) };
          state.month = list;
        }
      }
    };
    // 滚动切换五周视图
    const getFiveWeek = (type) => {
      if (state.scrollDisabled) return;

      if (type == "down") {
        // 下
        const lastDate = state.fiveWeek[state.fiveWeek.length - 1][6];
        // eslint-disable-next-line no-debugger
        const nextDate = state.calc.getDate(lastDate.fullDate, 7, "day").fullDate;
        state.fiveWeek.push(state.calc.getAnyWeek(nextDate, 1, 0)[0]);
        // 遍历时间第一行数据到数据内部

        // let removeEnd = state.fiveWeek[0][state.fiveWeek[4].length - 1].fullDate;
        state.fiveWeek.shift();
        if (lastDate.date > 10 && lastDate.month != state.nowDate.month) {
          const nextMonth = state.calc.getDate(state.nowDate.fullDate, 1, "month")
            .fullDate;
          state.calc.setDate(nextMonth);
          state.nowDate = state.calc.getInfo(nextMonth);
          state.currentDate = state.nowDate.fullDate;
        }
        state.weekScroll -= 1;

      } else if (type == "up") {
        // 上
        const firstDate = state.fiveWeek[0][1];
        const preDate = state.calc.getDate(firstDate.fullDate, -7, "day").fullDate;

        state.fiveWeek.unshift(state.calc.getAnyWeek(preDate, 1, 0)[0]);
        state.fiveWeek.pop();
        if (firstDate.date < 21 && firstDate.month != state.nowDate.month) {
          const preMonth = state.calc.getDate(state.nowDate.fullDate, -1, "month")
            .fullDate;
          state.calc.setDate(preMonth);
          state.nowDate = state.calc.getInfo(preMonth);
          state.currentDate = state.nowDate.fullDate;
        }

        state.weekScroll += 1;
      }
      if (state.weekScroll != 0) {
        isToday.value = false;
      } else {
        isToday.value = true;
      }
      // 获取事件，如果卡顿再做进一步优化； 可选方案， 仅获取上一行时间的事件数据填充进去 ；
      getEvent()
    };
    // 回到今天
    const backToday = () => {
      isToday.value = true;
      init(new Date());
    };
    // 切换视图
    const changeView = (e) => {
      if(view.value == e.type) return false
      view.value = e.type;
      showTime.value = false;
      proxy.mittBus.emit('switchCalendarView', e)
      if(view.value !== 'list') {
        // 列表的数据在列表页获取
        getEvent()
      }
      windowAddMouseWheel();
    };
    // 阻止
    const prevent = () => {
      return false;
    };
    const exchangeDate = (e) => {
      context.emit("changeDate", e);
    };
    const delEvent = (e) => {
      context.emit("delEvent", e);
    };
    const submitForm = (e) => {
      context.emit("submitForm", e);
    };
    // 总结
    const addSummary = (e) => {
      context.emit("addSummary", e);
    };
    // 完成
    const completeEvent = (e) => {
      context.emit("completeEvent", e);
    };
    // 关闭更多modal
    const closeMore = () => {
      windowAddMouseWheel();
    };
    // 审批通过
    const approverAccess = e => {
      console.log('access 1')
    }
    // 审批拒绝
    const approverReject = e => {
      console.log('reject 1')
    }
    // 鼠标滚轮事件
    const windowAddMouseWheel = () => {
      if (view.value == "fiveWeek") {
        var scrollFunc = (e) => {
          e = e || window.event;

          // tongguo
          if (e.wheelDelta) {
            //判断浏览器IE，谷歌滑轮事件
            if (e.wheelDelta > 0) {
              //当滑轮向上滚动时
              getFiveWeek("up");
            }
            if (e.wheelDelta < 0) {
              //当滑轮向下滚动时
              getFiveWeek("down");
            }
          } else if (e.detail) {
            //Firefox滑轮事件
            if (e.detail > 0) {
              //当滑轮向上滚动时
              getFiveWeek("up");
            }
            if (e.detail < 0) {
              //当滑轮向下滚动时
              getFiveWeek("down");
            }
          }
        };
        //给页面绑定滑轮滚动事件
        if (document.addEventListener) {
          //火狐使用DOMMouseScroll绑定
          document.addEventListener("DOMMouseScroll", scrollFunc, false);
        }
        //其他浏览器直接绑定滚动事件
        window.onmousewheel = scrollFunc;
      } else {
        window.onmousewheel = null;
      }
    };
    // 选择日期
    const dateChange = (e) => {
      state.currentDate = e;
      init(e);
    };
    // 下拉框隐藏
    const selectChange = (e) => {
      state.visible = e;
    };
    const marketChange = (e) => {
      state.visible = e;
    };

    let fillName = ref("#529b2e");
    // 筛选数据数据类型
    const changeDataType = (e) => {
      // console.log(e);
      if (Number(e) === 5) {
        fillName.value = "#F56C6C";
        // console.log(fillName.value);
      } else {
        fillName.value = "#529b2e";
      }
    };
    const warningClick = () => {
      state.isWarning = !state.isWarning;
      if (state.isWarning === true) {
        context.emit("warningArrClick", state.isWarning);
      } else {
        context.emit("warningArrClick", state.isWarning);
      }
    };
    const BranClick = () => {
      state.isBran = !state.isBran;
    };
    // 查看忽略的数据
    const checkIgnore = () => {
      state.isIgnore = !state.isIgnore;
    }
    // 获取事件数据
    const getEvent = async () => {
      if(state.lockData) return false
      state.lockData = true
      const loading = ElLoading.service({
        lock: true,
        text: '获取中',
        background: 'transparent',
      })
      let currentRange = []
      if(view.value == 'week') {
        // 1周
        currentRange = [state.week[0].fullDate, state.week[6].fullDate]
      }else if (view.value == 'multipleweek') {
        // 2周
        currentRange =  [state.multipleweek[0][0].fullDate, state.multipleweek[1][6].fullDate]
      }else if(view.value == 'fiveWeek') {
        // 5周
        window.onmousewheel = null;
        currentRange = [state.fiveWeek[0][0].fullDate, state.fiveWeek[4][6].fullDate]
      }
      const res = await homeCalendar.timeGetEventData({startDate: currentRange[0],endDate: currentRange[1]})
      let datas = res.data
      datas = datas.map((item, index) => {
        const eventColor = defaultConfig.colors.find(e => e.id == item.state)
        item.id = item.id;
        let times = item.actionStartTime.split(" ")[1];
        let timee = item.actionEndTime.split(" ")[1];
        item.hours = times + " - " + timee;
        item.isEdit = true;
        item.theme = 1;
        item.color = eventColor ? eventColor.color : '#fff';
        item.background = eventColor ? eventColor.background : '#000';
        return item;
      });
      events.value = datas;
      deEvents.value = filterDay(events.value); // 筛选后的events
      state.lockData = false
      if(view.value == 'fiveWeek') {
        windowAddMouseWheel()
      }
      loading.close()
    }
    // 选择别人
    const handleOrganizeChange = (e) => {
      context.emit('changeOrganize', e)
    }
    onMounted(() => {
      state.calc = new Calendar({
        date: new Date(),
        range: range,
      });
      init(new Date());
      document.addEventListener("keydown", (event) => {
        if (event.key == "ArrowLeft") {
          const data = {
            currentTarget: {
              dataset: {
                type: "prev",
              },
            },
          };
          changeDate(data);
        } else if (event.key == "ArrowRight") {
          const data = {
            currentTarget: {
              dataset: {
                type: "next",
              },
            },
          };
          changeDate(data);
        } else {
          // event.preventDefault()
        }
      });
      windowAddMouseWheel();
      // 监听《事项创建》事件
      proxy.mittBus.on('submitEventForm', () => {
        getEvent()
      });
      // 监听事项表单销毁
      proxy.mittBus.on('setCalendarScroll', e => {
        if(e) {
          windowAddMouseWheel();
        }else{
          window.onmousewheel = null;
        }
      })
    });
    onUnmounted(() => {
      // 页面销毁
      window.onmousewheel = null;
    })
    return {
      ...toRefs(state),
      changeDate,
      backToday,
      changeView,
      view,
      isToday,
      prevent,
      showTime,
      deEvents,
      exchangeDate,
      delEvent,
      submitForm,
      selectDate,
      addSummary,
      closeMore,
      dateChange,
      selectChange,
      changeDataType,
      completeEvent,
      getThemeConfig,
      fillName,
      // Bran,
      // Warning,
      marketChange,
      status,
      warningClick,
      BranClick,
      events,
      checkIgnore,
      handleOrganizeChange,
      approverAccess,
      approverReject
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
@import url("../theme/ss-app.scss");
</style>
<style lang="scss" scoped>
.ssal-calendar {
  width: 100%;
  height: 100%;
  user-select: none;
  overflow: hidden;
  position: relative;
  .controller-scroll{
    height: 40px;
  }
  .calendar-controller {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    min-width: 1250px;
    overflow-x: auto;
    .date-filter{
      display: flex;
    }
    .current-time {
      font-size: 18px;
      color: #303133;
    }
    .date-change-container {
      display: flex;
      align-items: center;
      .switch-date {
        margin-right: 10px;
        width: 180px;
        background: #fff;
        height: 27px;
        padding-left: 5px;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
        border: 1px solid #e4e7ed;
        display: flex;
        align-items: center;
      }
      :deep(.date-ipt) {
        border: none;
        padding-bottom: 0;
      }
      .switch_btn {
        background: var(--el-color-primary-light-1);
        color: var(--next-color-white);
        border-radius: 0 2px 2px 0;
        font-size: 12px;
        width: 70px;
        height: calc(100% - 4px);
        cursor: pointer;
        margin: 2px;
        border-radius: 2px;
        &:hover {
          opacity: 0.8;
        }
        &:active {
          opacity: 1;
        }
      }
      .today {
        border: 1px solid #e4e7ed;
        background: #fff;
        border-radius: 2px;
        cursor: pointer;
        padding: 4px 10px;
        font-size: 12px;
        color: #909399;
        border-radius: 2px;
        margin-right: 10px;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
        &:hover {
          background: var(--ss-color-primary-light);
          color: var(--ss-color-primary);
          border-color: var(--ss-color-primary-light);
        }
      }
      .today-disabled,
      .today-disabled:hover {
        background: #f2f6fc;
        color: #c0c4cc;
        border-color: #e4e7ed;
      }
    }
    .other-btn {
      height: 27px;
      padding: 3px 8px 0;
      margin-left: 4px;
      border-radius: 2px;
    }
    .date-change {
      display: flex;
      align-items: center;
      border: 1px solid #e4e7ed;
      border-radius: 2px;
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
      background: #fff;
      .btn {
        border-right: 1px solid #e4e7ed;
        display: flex;
        align-items: center;
        height: 25px;
        padding: 5px 5px 0;
        cursor: pointer;
        &:last-child {
          border: none;
        }
        &:hover {
          color: var(--ss-color-primary);
          background: var(--ss-color-primary-light);
        }
      }
    }
  }
  .list-view{
    justify-content: flex-end;
    min-width: unset;
  }
  .view-controller {
    display: flex;
    align-items: center;
    .calendar-tab {
      display: flex;
      align-items: stretch;
      border: 1px solid #e4e7ed;
      border-radius: 2px;
      cursor: pointer;
      padding: 2px;
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
      margin-left: 10px;
      background: #fff;
    }
    .calendar-tab {
      .tab-cell {
        padding: 2px 15px;
        font-size: 12px;
        color: #909399;
        &:last-child {
          border: none;
        }
      }
      .tab-active {
        color: #fff;
        background: var(--el-color-primary-light-9);
        color: var(--ss-color-primary);
        border-radius: 2px;
      }
    }
  }
  .calendar-container-box {
    background: #fff;
    height: 100%;
  }
  .calendar-page-options {
    .page-icon {
      position: absolute;
      top: 40px;
      bottom: 0;
      display: flex;
      align-items: center;
      z-index: 999;
      opacity: 0;
      transition: 0.2s;
      overflow: hidden;
      &:hover {
        cursor: pointer;
        opacity: 1;
      }
      :deep(.i-icon) {
        position: relative;
        z-index: 5;
      }
    }
    .page-left {
      left: 0;
      &::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        right: -2px;
        bottom: 0;
        background: linear-gradient(to left, #fff, var(--el-color-primary-light-9));
        opacity: 0.8;
        backdrop-filter: blur(8px);
      }
    }
    .page-right {
      right: 0;
      &::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        right: -2px;
        bottom: 0;
        background: linear-gradient(to right, #fff, var(--el-color-primary-light-9));
        opacity: 0.8;
        backdrop-filter: blur(8px);
      }
    }
  }
}
:deep(.el-radio-button--small .el-radio-button__inner) {
  height: 27px;
  display: flex;
  align-items: center;
  line-height: 27px;
}
:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-radius: 2px 0 0 2px;
}
:deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-radius: 0 2px 2px 0;
}
.tipZ {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}

.animate__delay {
  --animate-delay: 0.5s;
}
:deep(.el-cascader){
  height: 29px;
  margin-right: 10px;
  width: 90px;
}
</style>
